<template>
  <Head title="型号故障统计" isBack>
    <template #content>
      <Table
        ref="tableRef"
        :columns="data.columns"
        :toolbar="data.toolbar"
        :query="data.query"
        @get-list="getData"
      >
      </Table>
    </template>
  </Head>
</template>

<script lang="ts" setup name="modelFaultStatistics">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import moment from 'moment';
import {
  getAlarmStatistics,
  EXPORT_ALARMSTATISTICS,
} from '@/service/apis/statistical';
import { exportFile } from '@/utils/utils';

const route = useRoute();
const {
  query: { id, equipmentBrandName, statisticStartTime, statisticEndTime },
} = route;

const tableRef = ref();

const data = reactive({
  detailData: {} as any,
  columns: [
    {
      prop: 'equipmentModelName',
      label: '电桩型号',
    },
    {
      prop: 'faultCount',
      label: '终端故障次数',
      dataType: String,
      askContent: '统计时间内终端故障的次数（持续上送的同一次故障不重复统计）',
    },
    {
      prop: 'faultPercentage',
      label: '终端故障率',
      dataType: String,
      askContent: '统计时间内终端故障总时长/（统计时长*终端数）',
      template: (row: any) => {
        return `${row.faultPercentage}%`;
      },
    },
    {
      prop: 'averageFaultRecoveryTime',
      label: '故障平均恢复时长',
      askContent: '故障总时长/故障总次数',
    },
    {
      prop: 'offlineCount',
      label: '电桩离线次数',
      dataType: String,
      askContent: '统计时间内电桩离线次数',
    },
    {
      prop: 'offlinePercentage',
      label: '电桩离线率',
      dataType: String,
      askContent: '统计时间内终端离线总时长/（统计时长*终端数）',
      template: (row: any) => {
        return `${row.offlinePercentage}%`;
      },
    },
    {
      prop: 'averageOfflineRecoveryTime',
      label: '离线平均恢复时长',
      dataType: String,
      askContent: '离线总时长/离线总次数',
    },
    {
      prop: 'modelPercentage',
      label: '同品牌故障占比',
      template: (row: any, index: any) => {
        return `${row.modelPercentage}%`;
      },
      askContent: '（型号故障次数+型号离线次数）/（品牌故障次数+品牌离线次数）',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'pileFaultStatisticsList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_ALARMSTATISTICS,
          '电桩型号故障统计',
          tableRef.value?.getForm()
        );
      },
    },
    {
      label: '电桩品牌',
      text: true,
      value: equipmentBrandName,
    },
  ],
  query: [
    {
      label: '统计时间',
      prop: 'data',
      comName: 'date',
      keys: ['statisticStartTime', 'statisticEndTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '电桩型号',
      prop: 'equipmentModelName',
      comName: 'input',
      props: {
        placeholder: '请输入电桩型号',
      },
    },
  ],
});

const getData = (page: any, search: any) => {
  nextTick(() => {
    let form: any = search.ruleForm;
    if (!form.data) {
      form.data = [statisticStartTime, statisticEndTime];
    }
    if (form.data && form.data.length > 0) {
      form.statisticStartTime = form.data[0];
      form.statisticEndTime = form.data[1];
    }
    form.alarmStatisticsType = '2';
    form.equipmentBrand = id;
    getAlarmStatistics(form, page).then((res: any) => {
      if (res) {
        if (
          page.pageNo !== 1 &&
          (!res.dataList || res.dataList?.length === 0)
        ) {
          page.pageNo--;
          getData(page, search);
          return;
        }
        nextTick(() => {
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        });
      }
    });
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>